<template>
  <div>
    <div class="header">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <span>{{ longComment.length + shortComment.length }}条评论</span>
      <span></span>
    </div>
    <div class="comment-box" v-if="longComment.length > 0">
      <p class="title">{{ longComment.length }}条长评</p>
      <CommentItem v-for="item in longComment" :key="item.id" :item="item" />
    </div>
    <div class="comment-box" v-if="shortComment.length > 0">
      <p class="title">{{ shortComment.length }}条短评</p>
      <CommentItem v-for="item in shortComment" :key="item.id" :item="item" />
    </div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import { getlongComment, getshortComment } from "@/views/Comment/comment";
import CommentItem from "@/views/Comment/components/commentItem/index.vue";
import { useRoute } from "vue-router";
import { CommentType } from "@/views/Comment/interface";
export default {
  components: {
    CommentItem,
  },
  setup() {
    const route = useRoute();
    const state = reactive<CommentType>({
      longComment: [],
      shortComment: [],
    });
    const init = async () => {
      await Promise.all([
        getlongComment(route.query.id as string),
        getshortComment(route.query.id as string),
      ]).then((res: any) => {
        state.longComment = res[0].comments;
        state.shortComment = res[1].comments;
      });
    };
    init();
    return { ...toRefs(state) };
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 0 0.1rem;
  height: 0.4rem;
  font-size: 0.18rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
}
.comment-box {
  .title {
    padding: 0.1rem;
    font-size: 0.16rem;
    font-weight: 700;
  }
  &:nth-child(2) {
    margin-top: 0.4rem;
  }
}
</style>